import 'package:flutter/material.dart';
import 'practice_page.dart';
import 'timed_practice_page.dart';
import 'sequence_practice_page.dart';

class PracticeSelectionPage extends StatelessWidget {
  const PracticeSelectionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xFF121212),
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        title: const Text(
          'Practice Modes',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Container(
        color: const Color(0xFF121212),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Choose your practice mode',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 8),
              const Text(
                'Each mode will help you improve different skills',
                style: TextStyle(
                  color: Color(0xFFAAAAAA),
                  fontSize: 16,
                ),
              ),
              const SizedBox(height: 30),
              
              Expanded(
                child: ListView(
                  children: [
                    _buildPracticeCard(
                      context,
                      icon: '🎯',
                      title: 'Character Recognition',
                      description: 'Listen to morse code and identify the character',
                      difficulty: 'Beginner',
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => const PracticePage()),
                      ),
                    ),
                    
                    const SizedBox(height: 16),
                    
                    _buildPracticeCard(
                      context,
                      icon: '⏱️',
                      title: 'Timed Challenge',
                      description: 'Test your speed with time-limited questions',
                      difficulty: 'Intermediate',
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => const TimedPracticePage()),
                      ),
                    ),
                    
                    const SizedBox(height: 16),
                    
                    _buildPracticeCard(
                      context,
                      icon: '📝',
                      title: 'Sequence Decoding',
                      description: 'Decode complete words from morse code',
                      difficulty: 'Advanced',
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => const SequencePracticePage()),
                      ),
                    ),
                    
                    const SizedBox(height: 16),
                    
                    _buildPracticeCard(
                      context,
                      icon: '🔤',
                      title: 'Mixed Practice',
                      description: 'Random mix of letters and numbers',
                      difficulty: 'All Levels',
                      onTap: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const PracticePage(isMixedMode: true),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPracticeCard(
    BuildContext context, {
    required String icon,
    required String title,
    required String description,
    required String difficulty,
    required VoidCallback onTap,
  }) {
    Color difficultyColor;
    switch (difficulty) {
      case 'Beginner':
        difficultyColor = const Color(0xFF4CAF50);
        break;
      case 'Intermediate':
        difficultyColor = const Color(0xFFFF9800);
        break;
      case 'Advanced':
        difficultyColor = const Color(0xFFF44336);
        break;
      default:
        difficultyColor = const Color(0xFF00BFFF);
    }

    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: const Color(0xFF1E1E1E),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: const Color(0xFF333333),
            width: 1,
          ),
        ),
        child: Row(
          children: [
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: const Color(0xFF00BFFF).withValues(alpha: 0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Center(
                child: Text(
                  icon,
                  style: const TextStyle(fontSize: 24),
                ),
              ),
            ),
            
            const SizedBox(width: 16),
            
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    description,
                    style: const TextStyle(
                      color: Color(0xFFAAAAAA),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                      color: difficultyColor.withValues(alpha: 0.2),
                      borderRadius: BorderRadius.circular(6),
                    ),
                    child: Text(
                      difficulty,
                      style: TextStyle(
                        color: difficultyColor,
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            
            const Icon(
              Icons.arrow_forward_ios,
              color: Color(0xFFAAAAAA),
              size: 16,
            ),
          ],
        ),
      ),
    );
  }
}
